<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#city').focus();
            $('#search').click();
        });

        function search() {
            $.ajax({
                // 1.url 请求地址
                url: 'https://www.tianqiapi.com/api',
                // 2.type 请求方式, 默认是'GET', 常用的还有'POST'
                type: 'get',
                // 3.dataType 设置返回的数据格式，常用的是'json'格式
                dataType: 'json',
                // 4.data 设置发送给服务器的数据, 没有参数不需要设置
                data: {
                    version: 'v6',
                    appid: '91982274',
                    appsecret: 'khf875YR',
                    city: $('#city').val()
                },
                // 5.success 设置请求成功后的回调函数
                success: function (resp) {
                    $('span[name="city"]').text(resp.city);
                    $('span[name="wea"]').text(resp.wea);
                    $('span[name="air_tips"]').text(resp.air_tips)
                },
                // 6.error 设置请求失败后的回调函数
                error: function () {
                    alert('网络错误');
                },
                // 7.async 设置是否异步, 默认是'true', 表示异步，一般不写
                async: true
            })
        }
    </script>
</head>
<body>
    <h1>天气查询</h1>
    <h3>请输入要查询的城市：</h3>
    <label for="city"></label>
    <input type="text" id="city" value="北京">
    <input type="button" id="search" value="查询" onclick="search()">
    <h3>查询结果</h3>
    <ul class="item">
        <li>
            <label>城市：</label>
            <span name="city"></span>
        </li>
        <li>
            <label>天气：</label>
            <span name="wea"></span>
        </li>
        <li>
            <label>提示：</label>
            <span name="air_tips"></span>
        </li>
    </ul>
</body>
</html>